<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="color.css" />
    <script src="./colors.js"></script>
    <script src="./copy.js"></script>
    <style></style>
  </head>
  <body>
    <div id="content"></div>
    <script>
    /*
    全局有COLORS_STRING变量，里面的结构是每行一个颜色的字符串，格式：
    颜色名|十六进制颜色|rgb颜色

    要求：
    将每一行颜色转换为如下结构的字符串，
    将所有颜色转化完的html渲染在div#id=content里

    <ul class='block' style='background-color:maroon;'>
      <li>maroon</li>
      <li>#800000</li>
      <li>128,0,0</li>
    </ul>

    */

    function allColors(text) {
      console.log(text) // 打开控制台，注意观察text格式
      // 你的代码
      return `${COLORS_STRING.split('\n').map(function(v,i){
         return `<ul class='block' style='background-color:${v.split("|")[0]};'>
          <li>${v.split("|")[0]}</li>                           
          <li>${v.split("|")[1]}</li>  
         <li>${v.split("|")[2]}</li>         
          </ul>  `

      }).join("")}`
     
    }

    // -------------------------- 以下内容保持不动 --------------------------
    document.querySelector('#content').innerHTML = allColors(COLORS_STRING)
    document.body.onclick = function (event) {
      if (event.target.tagName === 'LI') {
        copy(event.target.innerText)
        alert('复制：' + event.target.innerText)
      }
    }
    </script>
  </body>
</html>
